<template>
  <div class="settings-page">
    <div class="page-header">
      <h1 class="page-title">系统设置</h1>
      <p class="page-subtitle">配置系统参数和个人偏好</p>
    </div>

    <div class="settings-content">
      <el-row :gutter="24">
        <el-col :span="6">
          <!-- 设置导航菜单 -->
          <el-card class="settings-menu">
            <el-menu
              :default-active="activeTab"
              @select="handleMenuSelect"
              class="settings-nav"
            >
              <el-menu-item index="profile">
                <el-icon><User /></el-icon>
                <span>个人资料</span>
              </el-menu-item>
              <el-menu-item index="system">
                <el-icon><Setting /></el-icon>
                <span>系统设置</span>
              </el-menu-item>
              <el-menu-item index="storage">
                <el-icon><FolderOpened /></el-icon>
                <span>存储配置</span>
              </el-menu-item>
              <el-menu-item index="security">
                <el-icon><Lock /></el-icon>
                <span>安全设置</span>
              </el-menu-item>
              <el-menu-item index="about">
                <el-icon><InfoFilled /></el-icon>
                <span>关于系统</span>
              </el-menu-item>
            </el-menu>
          </el-card>
        </el-col>
        
        <el-col :span="18">
          <!-- 设置内容区域 -->
          <el-card class="settings-content-card">
            <!-- 个人资料 -->
            <div v-if="activeTab === 'profile'" class="settings-section">
              <div class="section-header">
                <h3>个人资料</h3>
                <p>管理您的个人信息和头像</p>
              </div>
              
              <el-form :model="profileForm" label-width="100px">
                <el-form-item label="头像">
                  <div class="avatar-section">
                    <el-avatar :size="80" :src="profileForm.avatar">
                      <el-icon><User /></el-icon>
                    </el-avatar>
                    <el-upload
                      class="avatar-upload"
                      action="#"
                      :show-file-list="false"
                      :before-upload="beforeAvatarUpload"
                    >
                      <el-button size="small">更换头像</el-button>
                    </el-upload>
                  </div>
                </el-form-item>
                
                <el-form-item label="姓名">
                  <el-input v-model="profileForm.name" style="width: 300px" />
                </el-form-item>
                
                <el-form-item label="邮箱">
                  <el-input v-model="profileForm.email" style="width: 300px" />
                </el-form-item>
                
                <el-form-item label="部门">
                  <el-input v-model="profileForm.department" style="width: 300px" />
                </el-form-item>
                
                <el-form-item label="职位">
                  <el-input v-model="profileForm.position" style="width: 300px" />
                </el-form-item>
                
                <el-form-item>
                  <el-button type="primary" @click="saveProfile">保存修改</el-button>
                  <el-button @click="resetProfile">重置</el-button>
                </el-form-item>
              </el-form>
            </div>

            <!-- 系统设置 -->
            <div v-else-if="activeTab === 'system'" class="settings-section">
              <div class="section-header">
                <h3>系统设置</h3>
                <p>配置系统行为和界面偏好</p>
              </div>
              
              <el-form :model="systemForm" label-width="150px">
                <el-form-item label="主题模式">
                  <el-radio-group v-model="systemForm.theme">
                    <el-radio value="light">浅色模式</el-radio>
                    <el-radio value="dark">深色模式</el-radio>
                    <el-radio value="auto">跟随系统</el-radio>
                  </el-radio-group>
                </el-form-item>
                
                <el-form-item label="语言">
                  <el-select v-model="systemForm.language" style="width: 200px">
                    <el-option label="简体中文" value="zh-cn" />
                    <el-option label="繁体中文" value="zh-tw" />
                    <el-option label="English" value="en" />
                  </el-select>
                </el-form-item>
                
                <el-form-item label="默认视图">
                  <el-radio-group v-model="systemForm.defaultView">
                    <el-radio value="grid">网格视图</el-radio>
                    <el-radio value="list">列表视图</el-radio>
                  </el-radio-group>
                </el-form-item>
                
                <el-form-item label="每页显示数量">
                  <el-select v-model="systemForm.pageSize" style="width: 120px">
                    <el-option label="12" :value="12" />
                    <el-option label="24" :value="24" />
                    <el-option label="36" :value="36" />
                    <el-option label="48" :value="48" />
                  </el-select>
                </el-form-item>
                
                <el-form-item label="自动保存">
                  <el-switch v-model="systemForm.autoSave" />
                  <span class="form-text">启用文档自动保存功能</span>
                </el-form-item>
                
                <el-form-item label="消息通知">
                  <el-switch v-model="systemForm.notifications" />
                  <span class="form-text">接收系统消息和提醒</span>
                </el-form-item>
                
                <el-form-item>
                  <el-button type="primary" @click="saveSystem">保存设置</el-button>
                  <el-button @click="resetSystem">重置默认</el-button>
                </el-form-item>
              </el-form>
            </div>

            <!-- 存储配置 -->
            <div v-else-if="activeTab === 'storage'" class="settings-section">
              <div class="section-header">
                <h3>存储配置</h3>
                <p>管理文档存储和缓存设置</p>
              </div>
              
              <div class="storage-stats">
                <el-row :gutter="20">
                  <el-col :span="8">
                    <div class="stat-card">
                      <div class="stat-icon primary">
                        <el-icon><FolderOpened /></el-icon>
                      </div>
                      <div class="stat-info">
                        <div class="stat-value">{{ storageInfo.used }}</div>
                        <div class="stat-label">已使用</div>
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="stat-card">
                      <div class="stat-icon success">
                        <el-icon><CircleCheck /></el-icon>
                      </div>
                      <div class="stat-info">
                        <div class="stat-value">{{ storageInfo.available }}</div>
                        <div class="stat-label">可用空间</div>
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="stat-card">
                      <div class="stat-icon warning">
                        <el-icon><Histogram /></el-icon>
                      </div>
                      <div class="stat-info">
                        <div class="stat-value">{{ storageInfo.total }}</div>
                        <div class="stat-label">总容量</div>
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </div>
              
              <el-form :model="storageForm" label-width="150px">
                <el-form-item label="自动清理缓存">
                  <el-switch v-model="storageForm.autoCleanCache" />
                  <span class="form-text">定期清理临时文件和缓存</span>
                </el-form-item>
                
                <el-form-item label="缓存有效期">
                  <el-select v-model="storageForm.cacheExpiry" style="width: 200px">
                    <el-option label="1天" value="1" />
                    <el-option label="7天" value="7" />
                    <el-option label="30天" value="30" />
                    <el-option label="永不过期" value="0" />
                  </el-select>
                </el-form-item>
                
                <el-form-item label="文件压缩">
                  <el-switch v-model="storageForm.compression" />
                  <span class="form-text">自动压缩上传的文档以节省空间</span>
                </el-form-item>
                
                <el-form-item>
                  <el-button type="primary" @click="saveStorage">保存设置</el-button>
                  <el-button type="warning" @click="clearCache">清理缓存</el-button>
                </el-form-item>
              </el-form>
            </div>

            <!-- 安全设置 -->
            <div v-else-if="activeTab === 'security'" class="settings-section">
              <div class="section-header">
                <h3>安全设置</h3>
                <p>管理账户安全和访问控制</p>
              </div>
              
              <el-form :model="securityForm" label-width="150px">
                <el-form-item label="修改密码">
                  <div class="password-section">
                    <el-input
                      v-model="securityForm.currentPassword"
                      type="password"
                      placeholder="当前密码"
                      style="width: 200px; margin-bottom: 10px;"
                      show-password
                    />
                    <el-input
                      v-model="securityForm.newPassword"
                      type="password"
                      placeholder="新密码"
                      style="width: 200px; margin-bottom: 10px;"
                      show-password
                    />
                    <el-input
                      v-model="securityForm.confirmPassword"
                      type="password"
                      placeholder="确认新密码"
                      style="width: 200px;"
                      show-password
                    />
                  </div>
                </el-form-item>
                
                <el-form-item label="两步验证">
                  <el-switch v-model="securityForm.twoFactor" />
                  <span class="form-text">启用两步验证增强账户安全</span>
                </el-form-item>
                
                <el-form-item label="登录保护">
                  <el-switch v-model="securityForm.loginProtection" />
                  <span class="form-text">异常登录时发送邮件通知</span>
                </el-form-item>
                
                <el-form-item label="会话超时">
                  <el-select v-model="securityForm.sessionTimeout" style="width: 150px">
                    <el-option label="30分钟" value="30" />
                    <el-option label="1小时" value="60" />
                    <el-option label="2小时" value="120" />
                    <el-option label="24小时" value="1440" />
                  </el-select>
                </el-form-item>
                
                <el-form-item>
                  <el-button type="primary" @click="saveSecurity">保存设置</el-button>
                  <el-button type="danger" @click="changePassword">修改密码</el-button>
                </el-form-item>
              </el-form>
            </div>

            <!-- 关于系统 -->
            <div v-else-if="activeTab === 'about'" class="settings-section">
              <div class="section-header">
                <h3>关于系统</h3>
                <p>查看系统版本和相关信息</p>
              </div>
              
              <div class="about-content">
                <div class="system-logo">
                  <el-icon size="64"><FolderOpened /></el-icon>
                  <h2>希能文档管理系统</h2>
                  <p>Document Management System</p>
                </div>
                
                <div class="system-info">
                  <el-descriptions :column="2" border>
                    <el-descriptions-item label="系统版本">{{ systemInfo.version }}</el-descriptions-item>
                    <el-descriptions-item label="构建时间">{{ systemInfo.buildTime }}</el-descriptions-item>
                    <el-descriptions-item label="技术栈">{{ systemInfo.techStack }}</el-descriptions-item>
                    <el-descriptions-item label="数据库">{{ systemInfo.database }}</el-descriptions-item>
                    <el-descriptions-item label="服务器">{{ systemInfo.server }}</el-descriptions-item>
                    <el-descriptions-item label="开发团队">{{ systemInfo.team }}</el-descriptions-item>
                  </el-descriptions>
                </div>
                
                <div class="contact-info">
                  <h4>技术支持</h4>
                  <p>如需技术支持或有任何问题，请联系开发团队</p>
                  <el-button type="primary" @click="contactSupport">
                    <el-icon><Message /></el-icon>
                    联系技术支持
                  </el-button>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  User, Setting, FolderOpened, Lock, InfoFilled,
  CircleCheck, Histogram, Message
} from '@element-plus/icons-vue'

// 响应式数据
const activeTab = ref('profile')

const profileForm = reactive({
  avatar: '',
  name: '张三',
  email: 'zhangsan@example.com',
  department: '研发部',
  position: '高级工程师'
})

const systemForm = reactive({
  theme: 'light',
  language: 'zh-cn',
  defaultView: 'grid',
  pageSize: 24,
  autoSave: true,
  notifications: true
})

const storageForm = reactive({
  autoCleanCache: true,
  cacheExpiry: '7',
  compression: true
})

const securityForm = reactive({
  currentPassword: '',
  newPassword: '',
  confirmPassword: '',
  twoFactor: false,
  loginProtection: true,
  sessionTimeout: '60'
})

const storageInfo = reactive({
  used: '2.3 GB',
  available: '7.7 GB',
  total: '10 GB'
})

const systemInfo = reactive({
  version: 'v1.0.0',
  buildTime: '2024-01-15',
  techStack: 'Vue 3 + Element Plus',
  database: 'PostgreSQL',
  server: 'Node.js + Express',
  team: '北京希能贸易有限公司'
})

// 方法
const handleMenuSelect = (index) => {
  activeTab.value = index
}

const beforeAvatarUpload = (file) => {
  const isImage = file.type.startsWith('image/')
  const isLt2M = file.size / 1024 / 1024 < 2

  if (!isImage) {
    ElMessage.error('头像文件必须是图片格式!')
    return false
  }
  if (!isLt2M) {
    ElMessage.error('头像文件大小不能超过 2MB!')
    return false
  }
  return true
}

const saveProfile = () => {
  ElMessage.success('个人资料保存成功！')
}

const resetProfile = () => {
  Object.assign(profileForm, {
    name: '张三',
    email: 'zhangsan@example.com',
    department: '研发部',
    position: '高级工程师'
  })
  ElMessage.info('个人资料已重置')
}

const saveSystem = () => {
  ElMessage.success('系统设置保存成功！')
}

const resetSystem = () => {
  Object.assign(systemForm, {
    theme: 'light',
    language: 'zh-cn',
    defaultView: 'grid',
    pageSize: 24,
    autoSave: true,
    notifications: true
  })
  ElMessage.info('系统设置已重置为默认值')
}

const saveStorage = () => {
  ElMessage.success('存储配置保存成功！')
}

const clearCache = async () => {
  try {
    await ElMessageBox.confirm(
      '确定要清理所有缓存文件吗？此操作将释放存储空间，但可能影响访问速度。',
      '清理缓存',
      {
        confirmButtonText: '确定清理',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
    
    ElMessage.success('缓存清理完成，已释放 156 MB 空间')
  } catch {
    // 用户取消
  }
}

const saveSecurity = () => {
  ElMessage.success('安全设置保存成功！')
}

const changePassword = () => {
  if (!securityForm.currentPassword) {
    ElMessage.warning('请输入当前密码')
    return
  }
  if (!securityForm.newPassword) {
    ElMessage.warning('请输入新密码')
    return
  }
  if (securityForm.newPassword !== securityForm.confirmPassword) {
    ElMessage.error('两次输入的密码不一致')
    return
  }
  
  ElMessage.success('密码修改成功！')
  securityForm.currentPassword = ''
  securityForm.newPassword = ''
  securityForm.confirmPassword = ''
}

const contactSupport = () => {
  ElMessage.info('技术支持联系方式已发送到您的邮箱')
}
</script>

<style lang="scss" scoped>
.settings-page {
  padding: 20px;
}

.page-header {
  margin-bottom: 24px;
  text-align: center;
  
  .page-title {
    font-size: 28px;
    font-weight: 600;
    color: var(--el-text-color-primary);
    margin-bottom: 8px;
  }
  
  .page-subtitle {
    color: var(--el-text-color-secondary);
    font-size: 14px;
  }
}

.settings-menu {
  .settings-nav {
    border-right: none;
    
    .el-menu-item {
      border-radius: 6px;
      margin: 4px 0;
      
      &.is-active {
        background-color: var(--el-color-primary-light-9);
        color: var(--el-color-primary);
        
        &::after {
          display: none;
        }
      }
    }
  }
}

.settings-content-card {
  min-height: 500px;
}

.settings-section {
  .section-header {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--el-border-color-lighter);
    
    h3 {
      font-size: 20px;
      color: var(--el-text-color-primary);
      margin: 0 0 8px 0;
    }
    
    p {
      color: var(--el-text-color-secondary);
      margin: 0;
      font-size: 14px;
    }
  }
}

.avatar-section {
  display: flex;
  align-items: center;
  gap: 16px;
  
  .avatar-upload {
    :deep(.el-upload) {
      display: inline-block;
    }
  }
}

.form-text {
  margin-left: 12px;
  color: var(--el-text-color-secondary);
  font-size: 13px;
}

.password-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.storage-stats {
  margin-bottom: 24px;
  
  .stat-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--el-fill-color-lighter);
    border-radius: var(--radius-large);
    
    .stat-icon {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      color: white;
      
      &.primary { background: var(--gradient-primary); }
      &.success { background: var(--gradient-success); }
      &.warning { background: var(--gradient-warning); }
    }
    
    .stat-info {
      .stat-value {
        font-size: 24px;
        font-weight: 600;
        color: var(--el-text-color-primary);
        margin-bottom: 4px;
      }
      
      .stat-label {
        font-size: 14px;
        color: var(--el-text-color-secondary);
      }
    }
  }
}

.about-content {
  text-align: center;
  
  .system-logo {
    margin-bottom: 32px;
    
    .el-icon {
      color: var(--el-color-primary);
      margin-bottom: 16px;
    }
    
    h2 {
      font-size: 24px;
      color: var(--el-text-color-primary);
      margin: 0 0 8px 0;
    }
    
    p {
      color: var(--el-text-color-secondary);
      margin: 0;
    }
  }
  
  .system-info {
    margin-bottom: 32px;
    text-align: left;
  }
  
  .contact-info {
    h4 {
      color: var(--el-text-color-primary);
      margin-bottom: 8px;
    }
    
    p {
      color: var(--el-text-color-secondary);
      margin-bottom: 16px;
    }
  }
}
</style>